<template>
    <div class="menu">
        <div class="item" :class="$store.state.currentLeftMenu === index ? 'current' : null" @click="$store.state.currentLeftMenu = index" v-for="(item, index) in categorys" :key="index">{{item.name}}</div>
    </div>
</template>

<script>
import mixin from '../mixins'
export default {
    name: 'shoppingMail-menu',
    mixins: [mixin],
    data(){
        return{
            categorys: [
                {id: 1, name: '热销'},
                {id: 2, name: '折扣'},
                {id: 3, name: '进店必买'},
                {id: 4, name: '台湾经典'},
                {id: 5, name: '鲜果系列'},
                {id: 6, name: '沏茶名著'},
                {id: 7, name: '香醇奶茶'},
                {id: 8, name: '加料区（加在哪一杯要备注）'}
            ],
        }
    }
}
</script>

<style lang="less" scoped>
    .menu{
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        font-size: 20px;
        color: #666;
        .item{
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            min-height: 70px;
            &.current{
                background-color: #fff;
                font-weight: bold;
                color: #333;
            }
        }
    }
</style>